vue3封装svg图标组件

#vue3封装svg图标组件| 来源: 网络整理| 查看: 265

一、新建SvgIcon组件

1.新建components/SvgIcon/index.vue文件

import { defineProps, computed } from 'vue' const props = defineProps({ // icon 图标 icon: { type: String, required: true }, // 图标类名 className: { type: String, default: '' } }) /** * 判断当前图标是否为外部图标 */ function external(path) { return /^(https?:|mailto:|tel:)/.test(path) } const isExternal = computed(() => external(props.icon)) /** * 外部图标样式 */ const styleExternalIcon = computed(() => ({ mask: `url(${props.icon}) no-repeat 50% 50%`, '-webkit-mask': `url(${props.icon}) no-repeat 50% 50%` })) /** * 内部图标 */ const iconName = computed(() => `#icon-${props.icon}`) .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } .svg-external-icon { background-color: currentColor; mask-size: cover !important; display: inline-block; } 二.使用webpack打包时

1.新建src/assets/icons/svg文件夹（用于存放svg）

2.新建icons/index.ts文件，导入所有svg

import SvgIcon from '@/components/svgicons/SvgIcon.vue' /** * 导入所有 SVG文件 */ export const svgRequire=require.context('./svg',false,/\.svg$/); /** * 全局注册SvgIcon */ svgRequire.keys().forEach(svgIcon=>svgRequire(svgIcon)); // console.log(svgRequire) export default (app:any)=>{ app.component('svg-icon',SvgIcon); }

4.使用svg-sprite-loader处理svg图标

npm install --save-dev [email protected]

5.配置vue.config.ts

const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack(config) { // 设置 svg-sprite-loader config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/assets/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() } }

6.在main.ts中导入并传入app参数

// 导入 svgIcon import installIcons from '@/icons' installIcons(app) 三.使用vite工具时

1.在assets文件夹下新建svg文件夹，用来保存.svg文件

2.安装 vite-plugin-svg-icons 为开发依赖：

npm i --save-dev vite-plugin-svg-icons

3.修改vite.config.ts

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path, { join } from 'path' // 引入 path import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')], // 指定 symbolId 的格式 symbolId: 'icon-[name]' }) ], })

4.修改main.ts

import 'virtual:svg-icons-register'

【本文地址】

公司简介

联系我们